<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:icecore="http://www.icefaces.org/icefaces/core"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="body_content">
        
        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg" style="text-align: center">Sistema de Información Vehicular | Revisión de Vehículo</h3>
            
            
            
        <ace:tabSet id="sampleTabSet" clientSide="true">

            <ace:tabPane id="criterioBusqueda" label="Criterios de Búsqueda">
               
               
                    <h:panelGrid id="inputGrid" columns="8" width="100%" styleClass="textEntryInputTable">
                        
                    <ace:textEntry id="cedula" value="402000998" label="Cédula" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                        <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                    </ace:textEntry>

                    <ace:tooltip id="tooltipcedula"
                                 for="cedula"
                                 speechBubble="true"
                                 showEffect="slide"
                                 hideEffect="grow"
                                 showDelay="500"
                                 hideDelay="300"
                                 position="bottomLeft"
                                 targetPosition="topRight"
                                 showEffectLength="300"
                                 hideEffectLength="300">
                        <h:panelGrid styleClass="tooltipBoxStyle"> 
                            <h:outputText id="desc3" value="Cédula no debe tener guiones ni espacios en blanco. Ejemplo: 113630159"/>
                        </h:panelGrid>   
                    </ace:tooltip>

                    <ace:textEntry id="numeroMarchamo" value="ES1400" label="Marchamo" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                        <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                    </ace:textEntry>

                    <ace:tooltip id="tooltipMarchamo"
                                 for="numeroMarchamo"
                                 speechBubble="true"
                                 showEffect="slide"
                                 hideEffect="grow"
                                 showDelay="500"
                                 hideDelay="300"
                                 position="bottomLeft"
                                 targetPosition="topRight"
                                 showEffectLength="300"
                                 hideEffectLength="300">
                        <h:panelGrid styleClass="tooltipBoxStyle"> 
                            <h:outputText id="desc4" value="El número debe estar dentro del rango de marchamos emitidos"/>
                        </h:panelGrid>   
                    </ace:tooltip>
                        

                    <ace:textEntry id="placaVehiculo" value="659167" label="Placa del Vehículo" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                        <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                    </ace:textEntry>

                    <ace:tooltip id="tooltipPlaca3"
                                 for="placaVehiculo"
                                 speechBubble="true"
                                 showEffect="slide"
                                 hideEffect="grow"
                                 showDelay="500"
                                 hideDelay="300"
                                 position="bottomLeft"
                                 targetPosition="topRight"
                                 showEffectLength="300"
                                 hideEffectLength="300">
                        <h:panelGrid styleClass="tooltipBoxStyle"> 
                            <h:outputText id="desc5" value="Sin guiones ni espacios. Ejemplo: BXH432 ó 540321"/>
                        </h:panelGrid>   
                    </ace:tooltip>
                        
                    <ace:dateTimeEntry id="fecha"
                                       value="#{dateLabel.selectedDate}"
                                       timeZone="Costa Rica/San Jose"
                                       pattern="dd/MMM/yyyy"
                                       renderAsPopup="true"
                                       label="Fecha de inicio"
                    labelPosition="left"/>
                        
                    <ace:dateTimeEntry id="fecha2"
                                       value="#{dateLabel.selectedDate}"
                                       timeZone="Canada/Mountain"
                                       pattern="dd/MMM/yyyy"
                                       renderAsPopup="true"
                                       label="Fecha final"
                    labelPosition="left"/>
                        
                </h:panelGrid> 
                         
                <center><ace:pushButton id="envioConsulta" label="Consultar"></ace:pushButton> </center>

                   
                   
                <div class="separator"></div>
            </ace:tabPane>
          
                <ace:tabPane id="resultBusqueda" label="Resultado de Búsqueda">
    
                <div class="centered">
                    <h:graphicImage value="img/tablaHorario.png"/>
                    <h:graphicImage value="img/tablaHorario2.png"/>
                </div>>
                  
                <h:panelGrid>
                </h:panelGrid>
                    
                    
                    
            </ace:tabPane>
              
                <ace:tabPane id="infracVehic" label="Infracciones del Vehículo">
          
                <ice:dataTable
                    value=""
                    var="item"
                    width="100%">
                    <!-- Stock number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Infracción"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="colisión"/>
                    </ice:column>
                    <!-- Stock number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Estacionamiento"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="Biologia"/>
                    </ice:column>
                    <!-- Model number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Fecha"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="21/oct/12"/>
                    </ice:column>
                    <!-- Stock number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Hora"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="11:00"/>
                    </ice:column>
                    <!-- Stock number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Descripción"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="Colisión con vehiculo placa 813298, daños menores"/>
                    </ice:column>
                </ice:dataTable>
                       
                       
            </ace:tabPane>
          
          
          
        </ace:tabSet>
        
        
                 </ui:define>
</ui:composition>
